<template>
	<div ref="manageRef" class="manage">
		<header v-if="!isUniFrameWork || currentTab ==='admin'" class="manage-header">
			<Icon :file="backSVG" @onClick="back" />
			<div class="manage-header-content">
				{{ TUITranslateService.t(`TUIGroup.${TabName}`) }}
			</div>
			<div />
		</header>
		<main v-if="!currentTab || (isUniFrameWork && currentTab != 'admin')" class="main">
			<ManageName class="space-top" :isAuthor="isOwner || isAdmin || isWorkGroup" :data="currentGroup"
				@update="updateProfile" />
			<div class="user-info space-top">
				<header class="user-info-header" @click="setCurrentTab('member')">
					<label class="user-info-header-left">
						{{ TUITranslateService.t(`TUIGroup.群成员`) }}
					</label>
					<div class="user-info-header-right">
						<span class="span">
							{{ currentGroup.memberCount || groupMemberList.length }}
							{{ TUITranslateService.t(`TUIGroup.人`) }}
						</span>
						<Icon :file="rightIcon" />
					</div>
				</header>
				<ol class="user-info-list">
					<dl v-for="(item, index) in groupMemberList.slice(0, showUserNum)" :key="index"
						class="user-info-list-item">
						<dt class="user-info-list-item-main" @click="handleMemberProfileShow(item)">
							<img class="avatar" :src="
                  item.avatar ||
                    'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
                " onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'">
						</dt>
						<dd class="user-info-list-item-info">
							{{ item.nick || item.userID }}
						</dd>
					</dl>
					<!-- <dl
            v-if="isShowAddMember"
            class="user-info-list-item"
          >
            <dt
              class="avatar"
              @click="toggleMask('add')"
            >
              +
            </dt>
          </dl> -->
					<!-- <dl v-if="currentGroup.joinOption == 'FreeAccess'" class="user-info-list-item">
						<dt style="background-color: #d3d2d7;color: #fff;font-size: 26px;" class="avatar"
							@click="toggleMask('add')">
							<div style="margin-top: -5px;">+</div>
						</dt>
					</dl> -->
					<dl v-if="currentGroup.joinOption == 'FreeAccess' || currentSelfRole === 'Owner' || currentSelfRole === 'Admin'"
						class="user-info-list-item">
						<dt style="background-color: #d3d2d7;color: #fff;font-size: 26px;" class="avatar"
							@click="toggleMask('add')">
							<div style="margin-top: -5px;">+</div>
						</dt>
					</dl>
					<dl v-if="currentSelfRole === 'Owner' || currentSelfRole === 'Admin'" class="user-info-list-item">
						<dt style="background-color: #d3d2d7;color: #fff;font-size: 26px;" class="avatar"
							@click="toggleMask('remove')">
							<div style="margin-top: -5px;">-</div>
						</dt>
					</dl>
				</ol>
			</div>
			<ul class="content list space-top" @click="editLableName = ''">
				<li class="list-item" @click="setCurrentTab('notification')">
					<aside class="aside">
						<label class="label">{{
              TUITranslateService.t(`TUIGroup.群公告`)
            }}</label>
						<article class="article">
							{{ currentGroup.notification }}
						</article>
					</aside>
					<Icon :file="rightIcon" class="end" />
				</li>
				<!-- <li v-if="(isAdmin || isOwner) && isSetMuteTime" class="list-item" @click="setCurrentTab('isifriend')">
					<aside class="aside">
						<label class="label">是否允许群内成员相互加好友</label>
					</aside>
					<Icon :file="rightIcon" class="end" />
				</li> -->
				<li v-if="(isAdmin || isOwner) && isSetMuteTime" class="list-item">
					<aside class="aside">
						<label class="label">是否允许群内成员相互加好友</label>
					</aside>
					<Slider :open="openisifriend" @change="isifriendsetAllMuteTime" />
				</li>
				<!-- <li
          v-if="(isAdmin || isOwner) && isSetMuteTime"
          class="list-item"
          @click="setCurrentTab('admin')"
        >
          <label class="label">{{
            TUITranslateService.t(`TUIGroup.群管理`)
          }}</label>
          <Icon :file="rightIcon" />
        </li> -->
				<li v-if="(isAdmin || isOwner) && isSetMuteTime" class="list-item"
					@click="setCurrentTab('admin' || 'owner')">
					<label class="label">{{
		    TUITranslateService.t(`TUIGroup.群管理`)
		  }}</label>
					<Icon :file="rightIcon" />
				</li>
				<li class="list-item">
					<label class="label">{{
            TUITranslateService.t(`TUIGroup.群ID`)
          }}</label>
					<div class="groupID">
						<span class="span">{{ currentGroupID }}</span>
						<span @click="copyGroupID(currentGroupID)"
							style="border: 1px solid #bfbfbf;margin-left: 20rpx;padding: 5rpx;border-radius: 10rpx;">复制</span>
					</div>
				</li>
				<li class="list-item" @click="setCurrentTab('gqrcode')">
					<aside class="aside">
						<label class="label">群二维码</label>
					</aside>
					<Icon :file="rightIcon" class="end" />
				</li>
				<li class="list-item" @click="setCurrentTab('meeting')">
					<aside class="aside">
						<label class="label">多人会议</label>
					</aside>
					<Icon :file="rightIcon" class="end" />
				</li>
				<li class="list-item">
					<label class="label">{{
            TUITranslateService.t(`TUIGroup.群头像`)
          }}</label>
					<!-- <img style="width: 30px;height: 30px;font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;" :src="
              currentGroup.avatar ||
                'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'
            " onerror="this.onerror=null;this.src='https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'"> -->

					<div @click="choose_image">
						<img style="width: 30px;height: 30px;font-size: 12px;
				display: flex;
				justify-content: center;
				align-items: center;" :src="
				            currentGroup.avatar ||
				              'https://web.sdk.qcloud.com/im/demo/TUIkit/web/img/constomer.svg'
				          ">
					</div>




				</li>
				<!-- <li class="list-item">
          <label class="label">{{
            TUITranslateService.t(`TUIGroup.群类型`)
          }}</label>
          <span class="span">{{
            TUITranslateService.t(`TUIGroup.${typeName[currentGroup.type]}`)
          }}</span>
        </li> -->
				<li class="list-item" v-if="(isAdmin || isOwner) && isSetMuteTime" @click="setCurrentTab('joinOption')">
					<!-- <label class="label">{{
            TUITranslateService.t(`TUIGroup.加群方式`)
          }}</label>
          <span class="span">{{
            TUITranslateService.t(
              `TUIGroup.${typeName[currentGroup.joinOption]}`
            )
          }}</span> -->

					<aside class="aside">
						<label class="label">{{
            TUITranslateService.t(`TUIGroup.加群方式`)
          }}</label>
						<article class="span">
							{{TUITranslateService.t(
		        `TUIGroup.${typeName[currentGroup.joinOption]}`
		      )}}
						</article>
					</aside>
					<Icon :file="rightIcon" class="end" />
				</li>
				<li class="list-item" @click="setCurrentTab('namecard')">
					<aside class="aside">
						<label class="label">群内昵称</label>
						<article class="article">
							{{ currentGroup.selfInfo.nameCard }}
						</article>
					</aside>
					<Icon :file="rightIcon" class="end" />
				</li>
			</ul>
			<ul class="footer list space-top">
				<!-- <li v-if="currentSelfRole === 'Owner' && groupMemberList.length > 1" class="list-item"
					@click.stop="toggleMask('changeOwner')">
					{{ TUITranslateService.t(`TUIGroup.转让群组`) }}
				</li> -->
				<li v-if="canIDissmissGroup" class="list-item" @click.stop="dismissGroup(currentGroup)">
					{{ TUITranslateService.t(`TUIGroup.解散群聊`) }}
				</li>
				<li v-else class="list-item" @click.stop="quitGroup(currentGroup)">
					{{ TUITranslateService.t(`TUIGroup.退出群组`) }}
				</li>
			</ul>
		</main>
		<ManageMember v-if="currentTab === 'member'" :self="currentGroup.selfInfo" :list="groupMemberList"
			:total="~~currentGroup.memberCount"
			:isShowDel="(currentSelfRole === 'Owner' || currentSelfRole === 'Admin') && canDelMember"
			@more="getMember('more')" @del="submit" @handleMemberProfileShow="handleMemberProfileShow"
			@close="setCurrentTab('')" />
		<ManageProfile v-if="currentTab === 'profile'" :userInfo="currentMember" @close="setCurrentTab('')" />
		<ManageNotification v-if="currentTab === 'notification'" :isAuthor="isOwner || isAdmin || isWorkGroup"
			:data="currentGroup" @update="updateProfile" @close="setCurrentTab('')" />
		<ManageNamecard v-if="currentTab === 'namecard'" class="space-top" :data="currentGroup" @update="updateProfile"
			@close="setCurrentTab('')" />
		<!-- <Managelsifriend v-if="currentTab === 'isifriend'" :isAuthor="isOwner || isAdmin || isWorkGroup"
			class="space-top" :data="currentGroup" @update="updateProfile" @close="setCurrentTab('')" /> -->
		<ManageJoinoption v-if="currentTab === 'joinOption'" :isAuthor="isOwner || isAdmin || isWorkGroup"
			class="space-top" :data="currentGroup" @update="updateProfile" @close="setCurrentTab('')" />
		<ManageAdmin v-if="currentTab === 'admin'" v-show="isAdmin" :isSetMuteTime="isSetMuteTime" :member="member"
			:currentGroup="currentGroup" @addAdmin="toggleMask('addAdmin')" @removeAdmin="toggleMask('removeAdmin')"
			@setAllMuteTime="setAllMuteTime" :isShowDel="currentSelfRole === 'Admin'" @addMute="toggleMask('addMute')"
			@removeMute="toggleMask('removeMute')" @close="setCurrentTab('')" />
		<MaskLayer :show="mask" @update:show="(e) => (mask = e)">
			<Transfer :title="TUITranslateService.t(`TUIGroup.${transferTitle}`)" :list="transferList"
				:isSearch="isSearch" :isRadio="isRadio" :selectedList="selectedList" :isH5="!isPC" @submit="submit"
				@cancel="cancel" @search="handleSearchMember" />
		</MaskLayer>
		<Dialog class="deleted-dialog" :title="TUITranslateService.t(`TUIGroup.删除成员`)" :show="delDialogShow"
			:isH5="!isPC" :center="true" :isHeaderShow="isPC" @submit="handleManage(deletedUserList, 'remove')"
			@update:show="(e) => (delDialogShow = e)">
			<p v-if="deletedUserList.length === 1" class="del-dialog-title">
				{{ TUITranslateService.t(`TUIGroup.确定从群聊中删除该成员？`) }}
			</p>
			<p v-if="deletedUserList.length > 1" class="del-dialog-title">
				{{ TUITranslateService.t(`TUIGroup.确定从群聊中删除所选成员？`) }}
			</p>
		</Dialog>
		<qq-select ref="qqSelect"></qq-select>
		<powers ref="childRef"></powers>
	</div>
</template>
<script lang="ts" setup>
	import {
		ref,
		computed,
		watchEffect,
		onMounted,
		nextTick,
	} from '../../../adapter-vue';
	import TUIChatEngine, {
		TUITranslateService,
		TUIGroupService,
		TUIFriendService,
		TUIStore,
		StoreName,
		IGroupModel,
		TUIConversationService,
		IConversationModel,
	} from '@tencentcloud/chat-uikit-engine';
	import { TUIGlobal, outsideClick } from '@tencentcloud/universal-api';
	import MaskLayer from '../../common/MaskLayer/index.vue';
	import Dialog from '../../common/Dialog/index.vue';
	import Transfer from '../../common/Transfer/index.vue';
	import ManageName from './manage-name.vue';
	import ManageNamecard from './manage-namecard.vue';
	import ManageJoinoption from './manage-joinoption.vue';//入群方式
	// import Managelsifriend from './manage-isifriend.vue';
	import ManageNotification from './manage-notification.vue';
	import ManageMember from './manage-member.vue';
	import ManageProfile from './manage-profile.vue';
	import ManageAdmin from './manage-admin.vue';
	import Icon from '../../common/Icon.vue';
	import backSVG from '../../../assets/icon/back.svg';
	import rightIcon from '../../../assets/icon/right-icon.svg';
	import { Toast, TOAST_TYPE } from '../../common/Toast/index';
	import { isPC, isUniFrameWork } from '../../../utils/env';
	import Server from '../server';
	import { enableSampleTaskStatus } from '../../../utils/enableSampleTaskStatus';
	import { IFriendProfile, IGroupMember, IUserProfile } from '../../../interface';
	import useRequest from '@/utils/requestim';
	import Slider from '../../common/Slider/index.vue';
	import powers from '@/components/powers/powers.vue';
	const openisifriend = ref(false);

	function getGroupisifriend() {
		let promise = TUIGroupService.getGroupProfile({ groupID: currentGroup.value.groupID, groupCustomFieldFilter: ['isifriend'] });
		promise.then(function (imResponse) {
			const result = imResponse.data.group.groupCustomField.find(item => item.key === "isifriend");
			if (result) {
				if (result.value === "false" || result.value === '') {
					openisifriend.value = false
				}
				if (result.value === "true") {
					openisifriend.value = true
				}
			}
		}).catch(function (imError) {
			console.warn('获取群详细资料失败的相关信息:', imError);
		});

	}
	const childRef = ref(null);
	const choose_image = () => {
		childRef.value.open({
			powersType: 'POWERS_IMAGE',
			success: () => {
				////////////
				let utils = require('@/utils/util');
				utils.upload_one(url => {
					const optionsavatar : any = {
						groupID: currentGroup.value.groupID,
						avatar: url,
					};
					TUIGroupService.updateGroupProfile(optionsavatar).then((res : any) => {
						Toast({
							message: '修改成功',
						});
					}).catch((error : any) => {
						if (error.code == 10007) {
							Toast({
								message: '暂无权限',
							});
						}
					})
				});
				////////////
			}
		});

	}


	const isifriendsetAllMuteTime = (value : boolean) => {
		openisifriend.value = value
		let promise = TUIGroupService.updateGroupProfile({
			groupID: currentGroup.value.groupID,
			groupCustomField: [{ key: 'isifriend', value: String(openisifriend.value) }]
		});
		promise.then((res) => {
			Toast({
				message: '修改成功',
			});
		});
	};

	const TUIGroupServer = Server.getInstance();
	const TUIConstants = TUIGroupServer.constants;

	const props = defineProps({
		groupID: {
			type: String,
			default: '',
		},
		groupCurrentTab: {
			type: String,
			default: '',
		},
	});

	const manageRef = ref<any>(undefined);
	// type 'profile' | 'member' | 'notification' | 'admin' | ''
	const currentTab = ref('');
	const editLableName = ref('');
	const transferType = ref('');
	const mask = ref(false);
	const currentGroupID = ref('');
	const userInfo = ref({
		list: [] as IGroupMember[],
	});
	const currentMember = ref<IGroupMember>({});
	const typeName = ref({
		[TUIChatEngine.TYPES.GRP_WORK]: '好友工作群',
		[TUIChatEngine.TYPES.GRP_PUBLIC]: '陌生人社交群',
		[TUIChatEngine.TYPES.GRP_MEETING]: '临时会议群',
		[TUIChatEngine.TYPES.GRP_AVCHATROOM]: '直播群',
		[TUIChatEngine.TYPES.GRP_COMMUNITY]: '社群',
		[TUIChatEngine.TYPES.JOIN_OPTIONS_FREE_ACCESS]: '自由加入',
		[TUIChatEngine.TYPES.JOIN_OPTIONS_NEED_PERMISSION]: '需要验证',
		[TUIChatEngine.TYPES.JOIN_OPTIONS_DISABLE_APPLY]: '禁止加群',
	});
	const member = ref({
		admin: [] as IGroupMember[],
		member: [] as IGroupMember[],
		muteMember: [] as IGroupMember[],
	});
	const transferList = ref<IGroupMember[]>([]);
	const transferTitle = ref('');
	const isSearch = ref(false);
	const isRadio = ref(false);
	const selectedList = ref([]);
	const delDialogShow = ref(false);
	const groupMemberList = ref<IGroupMember[]>([]);
	const deletedUserList = ref([]);
	const currentGroup = ref<IGroupModel>();
	const currentSelfRole = ref('');
	const groupIDValue = ref<string>('');

	onMounted(() => {
		nextTick(() => {
			getGroupisifriend()
			if (manageRef.value && !isUniFrameWork) {
				outsideClick.listen({
					domRefs: manageRef.value,
					handler: handleCompleteManage,
				});
			}
		});

	});

	TUIStore.watch(StoreName.GRP, {
		currentGroup: (group : IGroupModel) => {
			if (group) {
				currentGroup.value = group;
				currentSelfRole.value = currentGroup.value?.selfInfo?.role;
			}
		},
		currentGroupMemberList: (memberList : IGroupMember[]) => {
			groupMemberList.value = memberList;
			member.value = {
				admin: [],
				member: [],
				muteMember: [],
			};
			Array.from(memberList).map((item : any) => {
				switch (item?.role) {
					case TUIChatEngine.TYPES.GRP_MBR_ROLE_ADMIN:
						member.value.admin.push(item);
						break;
					case TUIChatEngine.TYPES.GRP_MBR_ROLE_MEMBER:
						member.value.member.push(item);
						break;
					default:
						break;
				}
				return item;
			});
			const time : number = new Date().getTime();
			member.value.muteMember = Array.from(memberList).filter(
				(item : any) => item?.muteUntil * 1000 - time > 0,
			);
		},
	});

	TUIStore.watch(StoreName.CONV, {
		currentConversation: (conversation : IConversationModel) => {
			groupIDValue.value = conversation?.groupProfile?.groupID;
		},
	});

	watchEffect(() => {
		const params = TUIGroupServer.getOnCallParams(TUIConstants.TUIGroup.SERVICE.METHOD.OPEN_GROUP_MANAGEMENT);
		currentGroupID.value = params?.groupID || groupIDValue.value;
		currentTab.value = props.groupCurrentTab;
	});

	const TabName = computed(() => {
		let name = '';
		switch (currentTab.value) {
			case 'notification':
				name = '群公告';
				break;
			case 'member':
				name = '群成员';
				break;
			case 'profile':
				name = '群成员';
				break;
			default:
				name = '群管理';
				break;
			case 'namecard':
				name = '群内昵称';
				break;
			case 'isifriend':
				name = '是否允许群内成员互相加好友';
				break;
			case 'gqrcode':
				name = '群二维码';
				break;
			case 'meeting':
				name = '多人会议';
				break;
			case 'joinOption':
				name = '加群方式';
				break;
		}
		return name;
	});

	const isOwner = computed(() => {
		// Determine whether the person is the group owner/administrator
		const userRole = currentGroup.value?.selfInfo?.role;
		// return userRole === TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER;

		return userRole === TUIChatEngine.TYPES.GRP_MBR_ROLE_ADMIN || userRole === TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER;
	});

	const isAdmin = computed(() => {
		const userRole = currentGroup.value?.selfInfo?.role;
		// return userRole === TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER;

		return userRole === TUIChatEngine.TYPES.GRP_MBR_ROLE_ADMIN || userRole === TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER;

	});

	const isWorkGroup = computed(() => {
		return currentGroup.value?.type === TUIChatEngine.TYPES.GRP_WORK;
	});

	const isSetMuteTime = computed(() => {
		if (isWorkGroup.value || !(isOwner.value || isAdmin.value)) {
			return false;
		}
		return true;
	});

	const canDelMember = computed(() => {
		const groupType = currentGroup?.value?.type;
		const isAVChatRoom = groupType === TUIChatEngine.TYPES.GRP_AVCHATROOM;
		if (isAVChatRoom) {
			return false;
		}
		return true;
	});

	const updateProfile = async (newGroupProfile : any) => {
		const { key, value } = newGroupProfile;
		const options : any = {
			groupID: currentGroup.value.groupID,
			[key]: value,
		};
		TUIGroupService.updateGroupProfile(options)
			.then((res : any) => {
				currentGroup.value = res.data.group;
				editLableName.value = '';
			})
			.catch((error : any) => {
				Toast({
					message: error?.message,
					type: TOAST_TYPE.ERROR,
				});
			});
	};
	const copyGroupID = (currentGroupID : string) => {
		uni.setClipboardData({
			data: currentGroupID,
			success: () => {
				uni.showToast({//提示
					title: `复制成功`,
					icon: 'success'
				})
			}
		}, true);
	}
	const setCurrentTab = (tabName : string) => {
		currentTab.value = tabName;
		editLableName.value = '';
		if (currentTab.value === 'member') {
			transferType.value = 'remove';
		}
		if (!currentTab.value) {
			transferType.value = '';
		}

		if (currentTab.value === 'gqrcode') {
			TUIGlobal?.navigateTo({
				url: `/TUIKit/manage-gqrcode?groupID=${currentGroupID.value}&groupname=${currentGroup.value.name}&faceurl=${currentGroup.value.avatar}`,
			});
		}
		if (currentTab.value === 'meeting') {
			// const roomEngine = new TUIRoomEngine();
			// console.log('roomEngine',roomEngine)
			// const roomInfo = roomEngine.enterRoom({
			//     roomId: '2UM5TE2PR',
			//     roomType: TUIRoomType.kConference
			// });
			handlegetMettingInfo()
		}
	};
	//获取会议信息
	async function handlegetMettingInfo() {
		try {
			let getMettingInfoobj = {
				roomId: currentGroupID.value
			};
			const response = await useRequest({
				url: '/tencentImMetting/getMettingInfo',
				header: {
					'token': uni.getStorageSync('ACCESS_TOKEN')
				},
				method: 'get',
				data: getMettingInfoobj,
			});
			if (response.data.code == 200) {
				console.log('获取会议信息', response.data)
				if (response.data.data.RoomId) {
					TUIGlobal?.navigateTo({
						url: `/pages/webindex/index?groupID=${response.data.data.RoomId}`,
					});
				} else {
					if (isOwner.value || isAdmin.value) {
						handleCreateRoom()//创建房间
					} else {
						Toast({
							message: '暂无会议'
						});
					}
				}
			} else {
				Toast({
					message: response.data.msg
				});
			}
		} catch (error) {
			console.error('Error:', error);
		}
	}
	// 创建房间
	async function handleCreateRoom() {
		try {
			let initiateMettingobj = {
				RoomInfo: {
					RoomId: currentGroupID.value,
					RoomType: 'Conference',
					TakeSeatMode: 'FreeToTake'
				},
			};
			const response = await useRequest({
				url: '/tencentImMetting/initiateMetting',
				header: {
					'token': uni.getStorageSync('ACCESS_TOKEN')
				},
				method: 'POST',
				data: initiateMettingobj,
			});
			if (response.data.code == 200) {
				const quRoomId = currentGroupID.value.substring(currentGroupID.value.indexOf("#") + 1);
				TUIGlobal?.navigateTo({
					url: `/pages/webindex/index?groupID=${quRoomId}`,
				});
			} else {
				Toast({
					message: TUITranslateService.t(response.data.msg)
				});
			}
		} catch (error) {
			console.error('Error:', error);
		}
	}


	const cancel = () => {
		toggleMask();
	};

	const toggleMask = async (type ?: string) => {
		selectedList.value = [];
		let memberUserIDList : string[] = [];
		switch (type) {
			case 'add':
				isRadio.value = false;
				memberUserIDList = [...member.value.admin, ...member.value.member].map((item : IUserProfile) => item.userID);
				transferList.value = (await friendList()).filter((item : IFriendProfile) => {
					return item.userID && memberUserIDList.indexOf(item.userID) < 0;
				});
				transferTitle.value = '添加成员';
				break;
			case 'remove':
				isRadio.value = false;
				transferList.value = groupMemberList.value.filter(
					(item : any) => item.userID !== currentGroup?.value?.selfInfo?.userID,
				);
				transferTitle.value = '删除成员';
				break;
			case 'addAdmin':
				isRadio.value = true;
				transferList.value = member.value.member;
				transferTitle.value = '新增管理员';
				break;
			case 'removeAdmin':
				isRadio.value = true;
				transferList.value = member.value.admin;
				transferTitle.value = '移除管理员';
				break;
			case 'changeOwner':
				isRadio.value = true;
				transferList.value = [...member.value.admin, ...member.value.member];
				transferTitle.value = '转让群组';
				break;
			case 'addMute':
				isRadio.value = true;
				transferList.value = member.value.member;
				if (currentGroup.value.selfInfo.role === 'Owner') {
					transferList.value = [...member.value.admin, ...member.value.member];
				}
				transferList.value = transferList?.value?.filter((item : any) => {
					return member?.value?.muteMember?.indexOf(item) < 0;
				});
				transferTitle.value = '新增禁言用户';
				break;
			case 'removeMute':
				isRadio.value = true;
				transferList.value = member.value.muteMember;
				transferTitle.value = '移除禁言用户';
				break;
			default:
				break;
		}
		type && (transferType.value = type);
		mask.value = !mask.value;
	};

	const friendList = async () => {
		const imResponse = await TUIFriendService.getFriendList();
		const friendList = imResponse.data.map((item : any) => item?.profile);
		return friendList.filter(
			(item : any) =>
				!userInfo.value.list.some(
					(infoItem : any) => infoItem.userID === item.userID,
				),
		);
	};

	const canIDissmissGroup = computed(() => {
		const userRole = currentGroup?.value?.selfInfo?.role;
		const groupType = currentGroup?.value?.type;

		return (
			userRole === TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER
			&& groupType !== TUIChatEngine.TYPES.GRP_WORK
		);
	});

	const isShowAddMember = computed(() => {
		const groupType = currentGroup?.value?.type;
		return groupType === TUIChatEngine.TYPES.GRP_WORK;
	});

	const showUserNum = computed(() => {
		let num = 3;
		if (!isShowAddMember.value) {
			num += 1;
		}
		if (currentGroup?.value?.selfInfo?.role !== 'Owner') {
			num += 1;
		}
		return num;
	});

	const getMember = async (type ?: string) => {
		const groupID = currentGroupID.value;
		const options = {
			groupID,
			count: 100,
			offset: type && type === 'more' ? userInfo.value.list.length : 0,
		};
		await TUIGroupService.getGroupMemberList(options).then((res : any) => {
			if (type && type === 'more') {
				userInfo.value.list = [...userInfo.value.list, ...res.data.memberList];
			} else {
				console.log('@@2', res.data)
				userInfo.value.list = res.data.memberList;
			}
		});
	};

	const handleMemberProfileShow = (user : any) => {
		currentMember.value = user;
		setCurrentTab('profile');
	};

	const submit = (userList : any) => {
		if (transferType.value === 'remove') {
			deletedUserList.value = userList;
			delDialogShow.value = !delDialogShow.value;
		} else {
			handleManage(userList, transferType.value);
		}
		mask.value = false;
	};

	const dismissGroup = async (group : any) => {
		await TUIGroupService.dismissGroup(group.groupID);
		enableSampleTaskStatus('dismissGroup');
		Toast({
			message: TUITranslateService.t('TUIGroup.群组解散成功'),
			type: TOAST_TYPE.SUCCESS,
		});
		clearGroupInfo();
	};

	const clearGroupInfo = () => {
		if (isUniFrameWork) {
			TUIGlobal?.switchTab({
				url: '/TUIKit/components/TUIConversation/index',
			});
		} else {
			handleCompleteManage();
			TUIConversationService.switchConversation();
		}
	};

	const setAllMuteTime = (value : boolean) => {
		// Set up a muting time for all members
		updateProfile({ key: 'muteAllMembers', value });
		if (value) {
			enableSampleTaskStatus('muteGroup');
			Toast({
				message: TUITranslateService.t('TUIGroup.禁言设置成功'),
				type: TOAST_TYPE.SUCCESS,
			});
		} else {
			Toast({
				message: TUITranslateService.t('TUIGroup.取消禁言成功'),
				type: TOAST_TYPE.SUCCESS,
			});
		}
	};

	const handleSearchMember = async (value : string) => {
		let imResponse : any = {};
		let imMemberResponse : any = {};
		const options : any = {
			groupID: currentGroupID.value,
			userIDList: [value],
		};
		switch (transferType.value) {
			case 'add':
				try {
					imMemberResponse = await TUIGroupService.getGroupMemberProfile(options);
					console.log(imMemberResponse, "imMemberResponse");
					transferList.value = transferList.value.filter(
						(item : any) => item.userID !== imResponse.data[0]?.userID,
					);
					transferList.value = [...transferList.value, ...imResponse.data];
					if (imMemberResponse?.data?.memberList.length > 0) {
						transferList.value = transferList.value.map((item : any) => {
							if (item.userID === imMemberResponse?.data?.memberList[0].userID) {
								item.isDisabled = true;
							}
							return item;
						});
					}
				} catch (error : any) {
					const message = TUITranslateService.t('TUIGroup.该用户不存在');
					Toast({
						message,
						type: TOAST_TYPE.ERROR,
					});
				}
				break;
			case 'remove':
				try {
					imResponse = await TUIGroupService.getGroupMemberProfile(options);
					if (imResponse.data.memberList.length === 0) {
						const message = TUITranslateService.t('TUIGroup.该用户不在群组内');
						Toast({
							message,
							type: TOAST_TYPE.ERROR,
						});
					}
					transferList.value = transferList.value.filter(
						(item : any) => item.userID !== imResponse?.data?.memberList[0]?.userID,
					);
					if (imResponse?.data?.memberList.length) {
						transferList.value = [
							...transferList.value,
							...imResponse.data.memberList,
						];
					}
				} catch (error : any) {
					const message = TUITranslateService.t('TUIGroup.该用户不存在');
					Toast({
						message,
						type: TOAST_TYPE.ERROR,
					});
				}
				break;
			default:
				break;
		}
	};

	const handleManage = (userList : any, type : any) => {
		const userIDList : any = [];
		userList.map((item : any) => {
			userIDList.push(item.userID);
			return item;
		});
		switch (type) {
			case 'add':
				addMember(userIDList);
				break;
			case 'remove':
				deleteGroupMember(userIDList);
				break;
			case 'addAdmin':
				handleAdmin(userList[0]);
				break;
			case 'removeAdmin':
				handleAdmin(userList[0]);
				break;
			case 'changeOwner':
				changeOwner(userIDList[0]);
				break;
			case 'addMute':
				setMemberMuteTime(userIDList[0], 'add');
				break;
			case 'removeMute':
				setMemberMuteTime(userIDList[0], 'remove');
				break;
			default:
				break;
		}
	};

	const addMember = async (userIDList : any) => {
		// if (currentGroup.value.joinOption == 'FreeAccess') {
		let memberAccountall = userIDList.map(account => ({
			memberAccount: account
		}));
		const options : any = {
			groupId: currentGroupID.value,
			silence: 0,
			memberList: memberAccountall,
		};

		try {
			const response = await useRequest({
				url: '/tencentImGroup/addMember',
				header: {
					'token': uni.getStorageSync('ACCESS_TOKEN')
				},
				method: 'POST',
				data: options,
			});
			if (response.data.code == 200) {
				console.log('!!!1111', response.data)
			} else {
				Toast({
					message: response.data.msg
				});
			}
		} catch (error) {
			console.error('Error:', error);
		}

		// } else {
		// 	const options : any = {
		// 		groupID: currentGroupID.value,
		// 		userIDList,
		// 	};
		// 	await TUIGroupService.addGroupMember(options);
		// }
	};

	const changeOwner = async (userID : any) => {
		const options : any = {
			groupID: currentGroupID.value,
			newOwnerID: userID,
		};
		const imResponse = await TUIGroupService.changeGroupOwner(options);
		currentGroup.value = {};
		currentGroup.value = imResponse.data.group;
		console.log('群资料', currentGroup.value)
	};

	const setMemberMuteTime = async (userID : string, type ?: string) => {
		const options : any = {
			groupID: currentGroupID.value,
			userID,
			muteTime: type === 'add' ? 60 * 60 * 24 * 30 : 0,
		};
		await TUIGroupService.setGroupMemberMuteTime(options);
	};

	const handleAdmin = async (user : any) => {
		let role = '';
		switch (user.role) {
			case TUIChatEngine.TYPES.GRP_MBR_ROLE_ADMIN:
				role = TUIChatEngine.TYPES.GRP_MBR_ROLE_MEMBER;
				break;
			case TUIChatEngine.TYPES.GRP_MBR_ROLE_MEMBER:
				role = TUIChatEngine.TYPES.GRP_MBR_ROLE_ADMIN;
				break;
		}
		const options : any = {
			groupID: currentGroupID.value,
			userID: user.userID,
			role,
		};
		await TUIGroupService.setGroupMemberRole(options);
	};

	const deleteGroupMember = async (userIDList : any) => {
		const options : any = {
			groupID: currentGroupID.value,
			userIDList,
			reason: '',
		};
		await TUIGroupService.deleteGroupMember(options);
	};

	const quitGroup = async (group : any) => {
		await TUIGroupService.quitGroup(group.groupID);
		clearGroupInfo();
	};

	const back = () => {
		if (currentTab.value) {
			setCurrentTab('');
		} else {
			handleCompleteManage();
		}
	};

	const handleCompleteManage = () => {
		TUIStore.update(StoreName.GRP, 'isShowManageComponent', false);
		const callback = TUIGroupServer.getOnCallCallback(TUIConstants.TUIGroup.SERVICE.METHOD.OPEN_GROUP_MANAGEMENT);
		callback && callback();
	};
</script>
<style lang="scss" scoped src="./style/index.scss"></style>